//
//  WBVisitorView.swift
//  WJ微博
//
//  Created by 王杰 on 2017/1/20.
//  Copyright © 2017年 WangJie. All rights reserved.
//

import UIKit

/// 访客视图
class WBVisitorView: UIView {

    /// 访客视图信息字典   dict: [iconName , houseIcon, message, ....]   假设字典里面有这些key
    // 如果是首页，那么将 iconName 设置成 “” ， 别设置成nil ,因为nil 后面需要解包
    var visitorInfo:[String: String]?{
    
        didSet {  // 重写setter 方法，外面修改这个属性就会调用
        
            // 1> 取字典信息
            guard let iconName = visitorInfo?["iconName"],
                    let message = visitorInfo?["message"]
                else { return  }
            
            // 2> 设置tipLabel信息
            tipLabel.text = message
            
            // 3> 设置图像，如果是首页不需要设置
            if iconName == "" {   // 说明是首页
                
                // 首页需要转动，小房子图标
                startAnimation()
                
                return
            }
            // 外部图标
            iconView.image = UIImage(named: iconName)
            
            // 是否要显示小房子图标(除了首页需要，其余的都不需要)
            houseIconView.isHidden = true
            // 同理，首页的遮罩别的界面也不需要
            maskIconView.isHidden = true
        }
    }
    
    
    // 构造属性
    override init(frame: CGRect) {

        super.init(frame: frame)
        
        // 设置界面
        setupUI()
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    // MARK: - 私有控件
    // 中间小背景图标(private: 私有   lazy: 懒加载)
    // 为什么此处用private  ，后面addSubView 报错
    lazy var iconView:UIImageView = UIImageView(image: UIImage(named:"visitordiscover_feed_image_smallicon"))
    // 遮罩view，应该添加在iconView 之后，houseIconView 之前
    lazy var maskIconView:UIImageView = UIImageView(image: UIImage(named: "visitordiscover_feed_mask_smallicon"))
    // 小房子图标
    lazy var houseIconView:UIImageView = UIImageView(image: UIImage(named:"visitordiscover_feed_image_house"))
    // 提示label
    lazy var tipLabel:UILabel = UILabel.cz_label(withText: "关注一些人，回这里看看有什么惊喜!关注一些人，回这里看看有什么惊喜!", fontSize: 14, color: UIColor.darkGray)
    // 注册按钮
    lazy var registerBtn:UIButton = UIButton.cz_textButton("注册", fontSize: 14, normalColor: UIColor.orange, highlightedColor: UIColor.black, backgroundImageName: "common_button_white_disable")
    // 登录按钮
    lazy var loginBtn:UIButton = UIButton.cz_textButton("登录", fontSize: 14, normalColor:UIColor.darkGray, highlightedColor: UIColor.black, backgroundImageName: "common_button_white_disable")
}

// mark - 设置界面
extension WBVisitorView {

    func setupUI() {
        
        //0 注意: 在开发中，如果能使用颜色解决的就不要使用图片这样效率会更高。
        // 设置访客界面背景图
        backgroundColor =  UIColor.cz_color(withRed: 232, green: 233, blue: 232) // UIColor.white
        
        // 1 添加子控件
        addSubview(iconView)
        // 注意maskIconView 添加的位置
        addSubview(maskIconView)
        addSubview(houseIconView)
        addSubview(tipLabel)
        addSubview(registerBtn)
        addSubview(loginBtn)
        
        // 提示信息tipLabel 居中对齐
        tipLabel.textAlignment = .center
        
        // 2 设置子控件的frame
        //        let iconW:CGFloat = 150
        //        let padding:CGFloat = 0.7
        //        // 设置iconView的frame
        //        iconView.frame = CGRect(x: (UIScreen.cz_screenWidth() - iconW) * 0.5 , y: UIScreen.cz_screenHeight() * 0.5 - iconW*padding, width: iconW, height: iconW)
        //        // 设置 houseIconView的frame
        //        houseIconView.bounds = CGRect(x: 0, y: 0, width: 73.1, height: 70)
        //        houseIconView.center = iconView.center
        // ......
        
        // 向上面这种计算控件的frame 比较麻烦，不建议使用.推荐下面的写法
        // 纯代码的自动布局
        // 2 取消 autoresizing
        for view in subviews {
            
            view.translatesAutoresizingMaskIntoConstraints = false
        }

        // 3 设置自动布局(今天采用苹果原生布局)
        let margin:CGFloat = 10
        // 3.1 iconView 位于界面中心处, Y 值稍微往上来点
        /**
          * item:  视图
          * attribute: 约束关系
          * relatedBy: 约束关系
          * toItem: 参照视图
          * attribute: 参照属性
          * multiplier: 乘积
          * constant: 约束数值(常数)
         */
        // 注意: 如果想指定宽\高，参照视图设置成nil，参照属性选择.NotAnAttribute
//        addConstraint(NSLayoutConstraint(item: <#T##Any#>, attribute: <#T##NSLayoutAttribute#>, relatedBy: <#T##NSLayoutRelation#>, toItem: <#T##Any?#>, attribute: <#T##NSLayoutAttribute#>, multiplier: <#T##CGFloat#>, constant: <#T##CGFloat#>)
        addConstraint(NSLayoutConstraint(item: iconView, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1.0, constant: 0))
        addConstraint(NSLayoutConstraint(item: iconView, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .centerY, multiplier: 1.0, constant: -45))
        
        // 3.2 小房子图标布局
        addConstraint(NSLayoutConstraint(item: houseIconView, attribute: .centerX, relatedBy: .equal, toItem: iconView, attribute: .centerX, multiplier: 1.0, constant: 0))
        addConstraint(NSLayoutConstraint(item: houseIconView, attribute: .centerY, relatedBy: .equal, toItem: iconView, attribute: .centerY, multiplier: 1.0, constant: 0))
        
        // 3.3 提示标签布局
        addConstraint(NSLayoutConstraint(item: tipLabel, attribute: .centerX, relatedBy: .equal, toItem: iconView, attribute: .centerX, multiplier: 1.0, constant: 0))
        addConstraint(NSLayoutConstraint(item: tipLabel, attribute: .top, relatedBy: .equal, toItem: iconView, attribute: .bottom, multiplier: 1.0, constant: -2.0 * margin))
        // 指定标签的宽
        addConstraint(NSLayoutConstraint(item: tipLabel, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 236))

        // 3.4 注册按钮布局
        addConstraint(NSLayoutConstraint(item: registerBtn, attribute: .left, relatedBy: .equal, toItem: tipLabel, attribute: .left, multiplier: 1.0, constant: 0))
        addConstraint(NSLayoutConstraint(item: registerBtn, attribute: .top, relatedBy: .equal, toItem: tipLabel, attribute: .bottom, multiplier: 1.0, constant: margin))
        // 指定注册按钮的宽度 eg: 100
        addConstraint(NSLayoutConstraint(item: registerBtn, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 100))
        
        // 3.5 登录按钮布局
        addConstraint(NSLayoutConstraint(item: loginBtn, attribute: .right, relatedBy: .equal, toItem: tipLabel, attribute: .right, multiplier: 1.0, constant: 0))
        addConstraint(NSLayoutConstraint(item: loginBtn, attribute: .top, relatedBy: .equal, toItem: tipLabel, attribute: .bottom, multiplier: 1.0, constant: margin))
        // 指定注册按钮的宽度 eg: 100
        addConstraint(NSLayoutConstraint(item: loginBtn, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 100))
        
        // 3.6 遮罩图像maskIconView 布局, 此处用 VFL 实现
//        NSLayoutConstraint.constraints(withVisualFormat: (VFL公式), options: [], metrics: 约束数组字典, views: [String: 子视图])
        /**
          * H    水平方向
          * V    垂直方向
          * |     边界
          * []    包含控件的名称字符串，对应关系在 views 中字典定义
          * ()    定义控件的宽/高, 可以在 metrics 中指定
         */
        // views: 定义 VFL 中的控件名称和实际名称对应的映射关系
        // metrics: 定义 VFL 中 () 指定的常数映射关系
//        let viewDict = ["maskIconView":maskIconView]
        let viewDict = ["maskIconView":maskIconView,
                            "registerBtn":registerBtn] as [String : Any]
        let metrics = ["spacing": -32]
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[maskIconView]-0-|", options: [], metrics: nil, views: viewDict))
//        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[maskIconView]-0-|", options: [], metrics: nil, views: viewDict))
//        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[maskIconView]-(-35)-[registerBtn]", options: [], metrics: nil, views: viewDict))
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[maskIconView]-(spacing)-[registerBtn]", options: [], metrics: metrics, views: viewDict))
        
    }
    
    
    // MARK: - 开始转动首页小房子外面那圈图标
    func startAnimation() {
        
        // transform.rotation  旋转
        let animation = CABasicAnimation(keyPath: "transform.rotation")
        animation.toValue = 2 * M_PI  // 旋转角度
        animation.repeatCount = MAXFLOAT // 无限重复
        animation.duration = 15  // 转1圈需要的时间（s）
        
        // 保存动画的状态，完成之后不删除(默认值true 会删除 )
        // 如果 iconView被释放，动画会一起销毁!
        // 在设置连续播放的动画非常有用。eg: 点击home 值 回来，动画仍然能继续执行
        animation.isRemovedOnCompletion = false
        
        iconView.layer.add(animation, forKey: nil)
    }
}



